<template>
  <div class="bianji">
    <top-header :isLeft="true" title="编辑信息"> </top-header>
    <div class="content1">
         <div class="image">
      <img :src="img" id="image" alt="" width="300px" />
      <div style="display:flex; justify-content:space-around">
      <input type="file" id="file" name="file" />
      <input type="button" value="上传" @click="uploadFile" /></div>
    </div>
      <el-form 
        :model="ruleForm"
        status-icon
        ref="ruleForm"
        label-width="70px"
        class="ruleForm"
      >

        <el-form-item label="昵称" prop="username">
          <el-input v-model="ruleForm.username"></el-input>
      
        </el-form-item>
       
        <el-form-item label="性别:" prop="sex" >
          <el-radio v-model="ruleForm.radio" label="1">男</el-radio>
          <el-radio v-model="ruleForm.radio" label="2">女</el-radio>
        </el-form-item>
        <el-form-item label="个人说明" prop="content">
          <el-input
            type="textarea"
            :rows="2"
            placeholder="请输入内容"
            v-model="ruleForm.textarea"
          ></el-input>
        </el-form-item>
      </el-form>
      <!-- <el-upload
  class="upload-demo"
  drag
  action="https://jsonplaceholder.typicode.com/posts/"
  multiple>
  <i class="el-icon-upload"></i>
  <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
  
</el-upload> -->
      <div class="commit">
        <el-button type="primary"  @click="onSubmit">修改</el-button>
      </div>
    </div>
  </div>
</template>

<script>
import TopHeader from "../components/TopHeader.vue";
import QS from 'qs';
import $ from 'jquery'
export default {
  components: { TopHeader },
  data() {
    return {
      id:'', 
      img:'',
      userList:'',
      ruleForm: {
        username: "",
        sex: "",
        radio: "",
        textarea: "",
       
      },
    };
  },
  created() {
    this.show();
  },
  methods: {
    show(){
            if(localStorage.name ){
            let params={
            username:localStorage.name
          }
          this.$ajax.post('/mysql/loginselect.php',QS.stringify(params)).then((res)=>{
            console.log(res.data)
            this.userList = res.data
            console.log(this.userList)
            this.userList.some((i)=>{
              this.ruleForm.username=i.nickname
              this.img = i.icon2
              this.ruleForm.textarea=i.content
              this.id = i.id
              if(i.sex=='男'){
                this.ruleForm.radio = "1"
              }else if(i.sex == '女'){
                this.ruleForm.radio = "2"
              }

           console.log(this.ruleForm.radio)
            })
       
          })
      }
    },
     uploadFile() {
      var hrr = "";

      const self = this;

      var file = document.getElementById("file").files[0]; //图片上传
      if (file == null || file == "") {
        alert("请选择要上传的图片！");
        return false;
      }
      var formData = new FormData();
      formData.append("file", file); //添加一个新值到FormData对象内的一个已存在的键中，如果键不存在则会添加该键
      $.ajax({
        url: "http://localhost/mysql/Upload.php", //目标
        type: "POST", //传值方式
        data: formData,
        dataType: "text", //返回类型
        async: false, //异步传输
        contentType: false, //告诉jQuery不要去设置Content-Type请求头
        cache: false, //每次读取的是最新的数据
        processData: false, //告诉jQuery不要去处理发送的数据
        success(res) {
          $("#image").attr("src", res); //对图片路径进行赋值
          self.hrr = res;
          this.img = self.hrr
        },
      });

      console.log(typeof this.hrr);
    },
     onSubmit(e) {
      this.$refs.ruleForm.validate((valid) => {
        if (valid) {
         if(this.ruleForm.radio == 1){
           this.ruleForm.sex = '男'
         }else if(this.ruleForm.radio == 2){
           this.ruleForm.sex = '女'
         }
         console.log(this.ruleForm.sex)
          let params = QS.stringify({
            id:this.id,
            nickname:this.ruleForm.username,
            sex:this.ruleForm.sex,
            content:this.ruleForm.textarea,
            icon: this.hrr,
            id:localStorage.id
          });
          this.$http
            .post("http://localhost/mysql/loginModify.php", params)
            .then((result) => {
              console.log(result)
              this.$router.go(-1)
            })
            .catch((err) => {
              console.log(err);
            });
        } else {
          return false;
        }
      });
    },
  },
};
</script>
<style lang="scss" scoped>

  .image{
    // border:0;
  margin: 20px;
  padding:15px;
  height: 12rem;
  background-color: white;
  text-align: center;
  img{
    border-radius: 50%;
    width: 120px;
    height: 120px;
    margin-bottom: 20px;
    border: 1px solid;
    // border-radius: 10px;
  }
  
}

.bianji {
  margin: 0 10px 0 10px;
}
.content1 {
  margin-top: 90px;

  .ruleForm {
    width: 300px;
    margin-left: 20px;
  }
}
.commit {
  text-align: center;
  margin-top: 20px;
}
</style>